<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="style.css">
  <title>Title</title>
  <style>
    div:not(.container) {
      border: 1px dotted gray;
    }

    .row {
      min-height: 30px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col col-6">.col.col-6
      <br><br>
      i have 50% fixed width
    </div>
    <div class="col">.col
      <br><br>i shared width with other .col
    </div>
    <div class="col">.col
      <br><br>i shared width with other .col
    </div>
  </div>
  <div class="row">
    <div class="col col-1">.col .col-1</div>
    <div class="col col-3 col-offset-4">.col.col-3.col-offset-4 <br><br>i have
      25% left offset
    </div>
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
  </div>
  <div class="text-center">.row.center <br>they auto align center</div>
  <div class="row center">
    <div class="col col-3">.col.col-3</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
  </div>
  <div class="text-center">i don't have any .col</div>
  <div class="row">
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
  </div>
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
  <div class="row">
    <div class="col-xs-2">.col-xs-2</div>
    <div class="col-xs-2">.col-xs-2</div>
    <div class="col-xs-2">.col-xs-2</div>
    <div class="col-xs-6">
      <div class="form">
        <label class="row">
          <div class="col-xs-3">.col-xs-3</div>
          <div class="col">.col</div>
        </label></div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-2">.col-lg-2</div>
    <div class="col-lg-2">.col-lg-2</div>
    <div class="col-lg-2">.col-lg-2</div>
  </div>
  <p class="text-left">.text-left</p>
  <p class="text-center">.text-center</p>
  <p class="text-right">.text-right</p>
  <p class="text-justify">.text-justify</p>
  <p class="text-nowrap">.text-nowrap</p>
  <div class="row fix-ratio">
    <div class="fixed">i have a fixed ratio <br><br>my width:height=5:1</div>
  </div>
</div>
</body>
</html>
